<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#list{
		width: 400px;
		height: 160px;
		border: 4px solid blue;
		margin: 30px auto;
		overflow: hidden;
	}
	#list li{
		height: 80px;
		width: 400px;
		text-align: center;
		line-height: 80px;
		font-size: 50px;
		color: white;
		font-weight: 700;
		list-style: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
$(function(){
	
	setInterval(function(){
		// $('#list li').last().height(0);//让最后一个li高度变为0
		// $('#list').prepend($('#list li').last());//将最后一个li移动到list里面的第一位置
		// $('#list li').first().animate({'height':'80px'}, 300);//让刚才插入的高度是0的li变为正常高度

		// 牛x的jquery，一行搞定！！！！！
		$('#list').prepend($('#list li').last().height(0).animate({'height':'80px'}, 300));

	},1000)


})




</script>
</head>

<body>


<ul id="list">
	<li style="background:green;">1</li>
	<li style="background:blue;">2</li>
	<li style="background:purple;">3</li>
	<li style="background:grey;">4</li>
	<li style="background:orange;">5</li>
</ul>


</body>
</html>
